<template>
  <div>
    <el-card class="box-card">
       <el-form :model="form" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6" v-if="isShow == true">
            <el-form-item label="机构" prop="BRANCHNO">
              <select-tree :branch="form.branch.BRANCHNAME" @getBranchName="getBranch">
              </select-tree>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6" v-if="isShow == true">
            <el-form-item label="坐席编号" prop="AGENTID">
              <el-input v-model="form.AGENTID" disabled placeholder="请输入坐席编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="查询类型" prop="QUERYTYPE">
              <el-select size="mini" v-model="form.QUERYTYPE"  placeholder="请选择查询类型"
                style="width:100%;">
                <el-option v-for="item in queryTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!-- <el-input v-model="form.QUERYTYPE" placeholder="请选择查询类型"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="申请状态"  prop="STATUS">
              <el-select size="mini" clearable v-model="form.STATUS" @change="getScheduleApplication" placeholder="请选择申请状态"
                style="width:100%;">
                <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!-- <el-input v-model="form.STATUS" placeholder="请选择申请状态"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker size="mini" style="width:100%;" v-model="form.startDate" type="date"
                value-format="yyyyMMdd" placeholder="开始日期" :picker-options="pickerOptionsStart" @change="changeStart">
              </el-date-picker>
              <!-- <el-input v-model="form.startDate" placeholder="请输入开始日期"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker style="width:100%;" size="mini" v-model="form.endDate" type="date" value-format="yyyyMMdd"
                placeholder="结束日期" :picker-options="pickerOptionsEnd" @change="changeEnd">
              </el-date-picker>
              <!-- <el-input v-model="form.endDate" placeholder="请输入结束日期"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :lg='9' :md='12' style="margin-top:8px;">
            <el-button type="primary" icon="el-icon-search" size='mini' @click="getScheduleApplication">查询
            </el-button>
          <!-- </el-col>
          <el-col :lg="2" :md="3" class="searchBtnMarginTop"> -->
            <el-button type="warning" size="mini" icon="el-icon-refresh" @click="resetForm('form')">重置</el-button>
          <!-- </el-col>
        </el-row>
        <el-row>
          
          <el-col :lg="2" :md="3"> -->
            <el-button type="primary" size="mini" icon="el-icon-plus" @click="option.dialogVisible = true">新增休假申请</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <!-- <span>我的请求：</span><span>所有-</span> <el-checkbox v-model="checked">包括已过期</el-checkbox> -->
        <!-- <el-button size="mini" type="primary" @click="option.dialogVisible = true">休假申请</el-button> -->
      </div>
      <br />
      <el-row>
        <el-col>
           <el-table :data="tableData">
          <el-table-column prop="STATUS" label="状态" width="120"></el-table-column>
          <el-table-column prop="TYPE" label="类型" align="center"></el-table-column>
          <el-table-column prop="AGENTNAME" label="坐席名称" align="center" width="120"></el-table-column>
          <el-table-column prop="ACTIVITYTYPE" label="休假类型" align="center">
            <template slot-scope="scope">
              <div>
                {{scope.row.ACTIVITYTYPE | actFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="SRTDATETIME" label="申请开始日期" align="center" width="160">
            <template slot-scope="scope">
              <div>
                {{scope.row.SRTDATETIME | timeFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ENDDATETIME" label="申请结束日期" align="center" width="160">
            <template slot-scope="scope">
              <div>
                {{scope.row.ENDDATETIME | timeFormat}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="CHKUSER" label="审批人工号" align="center" width="120"></el-table-column>
          <el-table-column prop="NOTE" label="备注" width="300"></el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="cancel(scope.row)"
                v-if="form.QUERYTYPE == '1' && scope.row.STATUS == '已申请'">撤销</el-button>
              <!-- <el-button type="text" size="small" @click="answerDialog('answer', scope.row)"
                v-if="form.QUERYTYPE == '2' && scope.row.STATUS == '已申请'">应答</el-button> -->
              <el-button type="text" size="small" @click="verifyDialog( scope.row)"
                v-if="form.QUERYTYPE == '3'">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
        </el-col>
      </el-row>
    </el-card>

    <!-- 弹出框 -->
    <el-dialog title="休假审批" :visible.sync="dialogFlag" :lock-scroll=false>
        <el-form ref="form" :model="info">
          <el-form-item>
            <p class="pClass">
            &nbsp;&nbsp;&nbsp;&nbsp;本人{{dialogInfo.AGENTNAME}}申请在{{dialogInfo.SRTDATETIME | timeFormat}} 至 {{dialogInfo.ENDDATETIME | timeFormat}}
          之前休 {{dialogInfo.ACTIVITYTYPE | actFormat}}，望批准，谢谢！

            </p>
          </el-form-item>
          <el-form-item label="审批注释">
            <el-input size="small" type="textarea" v-model="NOTE3"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small" @click="verify('agree', dialogInfo)">同意</el-button>
          <el-button type="default" size="small" @click="verify('refuse', dialogInfo)">拒绝</el-button>
        </span>
      </el-dialog>
    <component :is="dialogList.AddDialog"  :option="option" @ListenVacation="getScheduleApplication"></component>
  </div>
</template>
<script>
  import request from "@/common/utils/requestWFM";
  import Query from '@/message/wfm/userScheduleManage/vacationRequest/vrQuery'
  import Add from '@/message/wfm/userScheduleManage/vacationRequest/vrAdd'
  import AddDialog from './dialog/addDialog.vue'
  import scheduleApplicationList from '@/message/wfm/userScheduleManage/scheduleApplication/scheduleApplicationList';
  import selectTree from "@/components/selectTree5/"
  import cancelApplication from '@/message/wfm/userScheduleManage/scheduleApplication/cancelApplication';
  import toolBox from '@/common/utils/toolBox'
  import verifyApplication from '@/message/wfm/userScheduleManage/scheduleApplication/verifyApplication';
  import activityQuery from '@/message/wfm/scheduleDataManage/activityManage/actQuery'
  let that = this
  export default {
    props:{
      isShow:{
        type:Boolean,
        default:true
      },
    },
    beforeCreate: function () {
     that = this;
    },
    components: {
      selectTree
    },
    filters:{
      timeFormat(val){
        if(val == ''){
          return ''
        }
        return toolBox.timeFormat(val)
      },
      actFormat(val){
        let str = ''
        that.actData.forEach(item => {
          if(item.ACTIVITYTYPE == val) {
            str = item.ACTIVITYTYPENAME
          }
        });
          return str
      }
    },
    data() {
      return {
        NOTE3: '',
        dialogInfo:{},
        dialogFlag: false,
        actData: [],
        tableData: [],
         queryTypeList: [{
            label: '我的申请',
            value: '1'
          },
          // {
          //   label: '我的待应答',
          //   value: '2'
          // },
          // {
          //   label: '我的待审批',
          //   value: '3',
          // },
          {
            label: '历史记录',
            value: '4'
          }
        ],
        statusOption: [{
            label: '已申请',
            value: '0'
          },
          {
            label: '已撤销',
            value: '1'
          },
          // {
          //   label: '应答人同意',
          //   value: '2',
          // },
          // {
          //   label: '应答人拒绝',
          //   value: '3'
          // },
          {
            label: '审批人同意',
            value: '4'
          },
          {
            label: '审批人拒绝',
            value: '5'
          },
          {
            label: '已过期',
            value: '6'
          }
        ],
        pickerOptionsStart: {
          disabledDate: (time) => {
            // return time.getTime() < Date.now()
          }
        },
        pickerOptionsEnd: {
          disabledDate: (time) => {
            // return time.getTime() < Date.now()
          }
        },
        form: { //表单数据
          startDate: '',
          endDate: '',
          branch: {
            BRANCHNO: this.$store.getters.BranchNum,
            BRANCHNAME: this.$store.getters.BranchName
          },
          AGENTID: this.$store.getters.UserNum,
          QUERYTYPE: '1',
          STATUS: ''
        },
        // form: {
        //   AGENTID: "shen3",
        // },
        option:{
          dialogVisible: false
        }, //控制弹框显示
        checked: false,
        loading: false,
        AGENTID: this.$store.getters.UserNum,
        resData: [],
        dialogList: { AddDialog },
        info: {
          otherDate: '',
          otherSchedule: '',
          myDate: '',
          mySchedule: '',
          remark: '',
          lastTime: ''
        },
      }
    },
    created(){
      this.form.startDate = toolBox.getCurrentMonthFirstDay();
      this.changeStart();
      this.form.endDate = toolBox.getCurrentMonthLastDay();
      this.changeEnd();
    },
    mounted() {
      this.actQuery(); 
      this.getScheduleApplication(); 
    },
    methods: {
       // 审批换班申请
      async verify(type, data) {
        // console.log('verifyData', data);
        let resBody = new verifyApplication();
        resBody.data.APPLYDATE = data.APPLYDATE;
        resBody.data.APPLYSERNO = data.APPLYSERNO;
        resBody.data.CHKUSER = data.CHKUSER;
        resBody.data.ANSW = type;
        resBody.data.NOTE3 = this.NOTE3;
        let response = await request(resBody);
        this.dialogFlag = false;
        this.getScheduleApplication();
      },
      // 审批dialog
      verifyDialog(data) {
        // console.log('verifyDialogData', data)
          this.dialogInfo = {};
          this.dialogData = {};
          this.dialogInfo.CHKUSER = data.CHKUSER;
          this.dialogInfo.APPLYDATE = data.APPLYDATE;
          this.dialogInfo.AGENTID = data.AGENTID;
          this.dialogInfo.AGENTNAME = data.AGENTNAME;
          this.dialogInfo.SRTDATETIME = data.SRTDATETIME;
          this.dialogInfo.ENDDATETIME = data.ENDDATETIME;
          this.dialogInfo.APPLYSERNO = data.APPLYSERNO;
          this.dialogInfo.ACTIVITYTYPE = data.ACTIVITYTYPE;
          // this.dialogInfo.ANSW = type
          this.dialogFlag = true;
      },
       // 活动查询
      async actQuery() {
        let resBody = new activityQuery()
        resBody.data.ACTIVITYCATEG = '04'
        resBody.data.CurrPage = 1
        resBody.data.PageRowNum = 100
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.actData = response.BODY.RSPSTRUCT
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
     getBranch(data) {
        this.form.branch.BRANCHNO = data.BRANCHNO
        this.form.branch.BRANCHNAME = data.BRANCHNAME
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      changeStart() {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            if (this.form.startDate) {
              return time.getTime() < Date.parse(this.form.startDate.slice(0, 4) + '-' + this.form
                .startDate.slice(4, 6) +
                '-' + this.form.startDate.slice(6, 8)) - 8.64e7
            } else {
              return time.getTime() < Date.now();
            }
          }
        })
      },
      changeEnd() {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            if (this.form.endDate) {
              return time.getTime() > Date.parse(this.form.endDate.slice(0, 4) + '-' + this.form.endDate
                .slice(4, 6) + '-' +
                this.form.endDate.slice(6, 8))
            } else {
              // return time.getTime() < Date.now();
            }
          }
        })
      },
      // 撤销休假申请
     cancel(data) {
        this.$confirm('此操作将撤销申请, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async () => {
          let resBody = new cancelApplication();
          resBody.data.APPLYSERNO = data.APPLYSERNO;
          resBody.data.APPLYDATE = data.APPLYDATE;
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
             this.$message({
            type: 'success',
            message: '撤销成功!'
          });
          this.getScheduleApplication()
          } else {
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });          
        });
        
      },
      // 查询申请
      async getScheduleApplication() {
        let that = this;
        let resBody = new scheduleApplicationList();
        resBody.data.SERVICETYPE = 'H'
        resBody.data.BRANCHNO = this.form.branch.BRANCHNO;
        resBody.data.AGENTID = this.form.AGENTID;
        resBody.data.QUERYTYPE = this.form.QUERYTYPE;
        resBody.data.STATUS = this.form.STATUS;
         resBody.data.BEGINDATE = this.form.startDate;
        resBody.data.ENDDATE = this.form.endDate;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == '000000') {
          this.tableData = response.BODY.SERVICEINFO;
          // console.log(this.tableData)
          this.tableData.map(function (value) {
            value.TYPE = '休假申请';

            switch (value.STATUS) {
              case '0':
                value.STATUS = '已申请';
                break;
              case '1':
                value.STATUS = '已撤销';
                break;
              // case '2':
              //   value.STATUS = '应答人同意';
              //   break;
              // case '3':
              //   value.STATUS = '应答人拒绝';
              //   break;
              case '4':
                value.STATUS = '审批人同意';
                break;
              case '5':
                value.STATUS = '审批人拒绝';
                break;
              case '6':
                value.STATUS = '已过期';
                break;
            };
            // // 对换人坐席与当前坐席一致
            // if(value.EXCHAGENTID == that.mockData.agentID) {
            //     // 已申请状态则需要审批
            //     if(value.STATUS == '已申请') {
            //         // 判定是否审核人
            //         value.verifyFlag = true;
            //     }else{
            //         value.verifyFlag = false;
            //     }
            // // 申请坐席与当前坐席一致时不需要审批
            // }else if(value.AGENTID == that.mockData.agentID){
            //     value.verifyFlag = false;
            // }else{
            //     if(value.STATUS == '应答人同意') {
            //         value.verifyFlag = true;
            //     }else{
            //         value.verifyFlag = false;
            //     }
            // }                     
          });
          // console.log(this.tableData)
          // console.log('list', response, that.tableData, 'kkkkk')
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      //休假查询
      // async queryVacationRe() {
      //   let resBody = new Query()
      //   resBody.data.AGENTID = this.AGENTID
      //   let response = await request(resBody);
      //   if (response.SYS_HEAD.ReturnCode == "000000") {
      //     // console.log(response)
      //     this.resData = response.BODY.BRANCHDATA;
      //     this.toJson();
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
      //     })
      //   }
      // },
      showModal() {
        this.dialogVisible = !this.dialogVisible
      },
      
      
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
  }

</script>
<style lang='scss' scoped>
  .pClass{
    font-size: 0.9rem;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }

</style>
